<template>
  <div id="page">
    <div class="fill"></div>
    <div class="login-div">
      <div class="title">Pesk-Admin 登录</div>
      <form class="form" id="login-form" method="post">
        <div class="form-inline">
          <label class="form-label">用户名</label>
          <input class="form-input" id="username" name="username" v-model="username">
        </div>
        <div class="form-inline">
          <label class="form-label">密码</label>
          <input type="password" class="form-input" name="password" id="password" v-model="password">
        </div>
        <div class="text-inline">
          <span class="text-left-item">账号注册</span>
          <span>|</span>
          <span class="text-right-item">找回密码</span>
        </div>
        <div class="btn-group">
          <input type="button" id="login" @click="submit" class="form-btn" value="登录">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data: function () {
      return {
        username: undefined,
        password: undefined
      }
    },
    mounted() {
      if (this.$store.state.userId){
        this.$router.push('/page/user/manager')
      }
    },
    methods: {
      submit() {
        if (!this.username) {
          this.$message.error("用户名不能为空")
        }
        if (!this.password) {
          this.$message.error("密码不能为空")
        }
        let params = {
          username: this.username,
          password: this.password
        }
        this.$AxiosUtil.postForm('/login', params).then(res => {
          if (res.success) {
            this.$store.commit("SetUserId",res.data.userId)
            this.$store.commit("SetUserName",res.data.userName)
            this.$store.commit("SetRole",res.data.userId)
          }
        }).catch(e => {
          this.$message.error("登录失败,请稍后再试")
        })
      }
    }
  }
</script>

<style scoped>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #page {
    width: 100%;
    height: 100vh;
    background-image: url("../../assets/login_bg.jpg");
  }

  .fill {
    width: 100%;
    height: 1px;
  }

  .login-div {
    width: 40%;
    height: 60vh;
    margin: 100px auto;
  }

  .title {
    width: 100%;
    height: 10vh;
    font-size: 36px;
    font-weight: bold;
    line-height: 10vh;
    color: white;
    text-align: center;
  }

  .form {
    width: 100%;
    height: calc(100% - 10vh - 10vh);
    margin: 5vh auto;
  }

  .form-inline {
    width: 100%;
    height: 40px;
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
  }

  span {
    color: white;
    font-size: 18px;
    font-weight: bold;
  }

  .form-label {
    width: 20%;
    height: 100%;
    line-height: 40px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
  }

  .form-input {
    width: calc(75% - 50px);
    height: 100%;
    line-height: 40px;
  }

  .btn-group {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    text-align: center;
  }

  .form-btn {
    width: 50%;
    height: 40px;
    margin: 0 auto;
    background-color: #19be6b;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .text-inline {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    margin-top: 80px;
  }

  .text-left-item {
    margin-right: 20px;
    cursor: pointer;
  }

  .text-right-item {
    margin-left: 20px;
    cursor: pointer;
  }

  input {
    border: none;
  }

  input:focus {
    outline: none;
  }
</style>
